<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form'
import type { VxeGridProps } from '#/adapter/vxe-table'
import { useTableCURD } from '#/hooks/useTableList'
import { Page } from '@vben/common-ui'
import { Button, Image, Modal, UploadDragger, message } from 'ant-design-vue'
import { ref } from 'vue'
import AddEditModal from './components/AddEditModal.vue'
import { columns, formSchema } from './data/table'
import type { TableListItem } from './use/api'
import { PageApi } from './use/api'
const formOptions: VbenFormProps = {
    schema: formSchema
}
const gridOptions: VxeGridProps<any> = {
    columns,
    proxyConfig: {
        ajax: {
            query: async ({ page }, formValues) => {
                const res = await PageApi.getPageList({
                    ...formValues,
                    limit: page.pageSize,
                    page: page.currentPage
                })
                return {
                    items: res.records,
                    total: res.total
                }
            }
        }
    },
    cellConfig: {
        height: 120
    }
}

/**
 * 表格配置
 */
const { Grid, updateStatus } = useTableCURD<TableListItem>({
    formOptions,
    gridOptions,
    modalOptions: {
        connectedComponent: AddEditModal
    },
})

const fileList: any = ref([])
const open = ref(false)
const objFile: any = ref({})
async function handleOk() {
    if (objFile.value?.name) {
        const res = await PageApi.upload({ file: objFile.value })
        if (res) {
            message.success('上传成功')
            open.value = false
        } else {
            message.error('上传失败')
        }
    }
}

function handleChange(file: any, fileList: any) {
    fileList = fileList
    objFile.value = file
    return false
}
</script>

<template>
    <Page>
        <Grid>
            <template #toolbar-tools>
                <view class="flex gap-2">
                    <Button @click="open = true"> 导入图片 </Button>
                    <Button type="primary"> 导出链接 </Button>
                    <Button danger type="primary"> 批量删除 </Button>
                </view>
            </template>
            <template #url="{ row }">
                <Image
                    :width="200"
                    :src="row.url"
                />
            </template>
            <template #isUsed="{ row }">
                {{ row.isUsed ? '是' : '否' }}
            </template>
        </Grid>
        <Modal v-model:open="open" title="图片导入" @ok="handleOk">
            <UploadDragger
                v-model:fileList="fileList"
                name="file"
                :multiple="true"
                :maxCount="1"
                :directory="false"
                :accept="'.zip'"
                :beforeUpload="handleChange"
            >
                <p class="ant-upload-drag-icon">
                    <inbox-outlined></inbox-outlined>
                </p>
                <p class="ant-upload-text">上传导入文件</p>
                <p class="ant-upload-hint">只能传zip文件,图片素材支持格式：png\jpg\gif
帖子图片支持gif</p>
            </UploadDragger>
        </Modal>
    </Page>
</template>
